<template>
  <div :class="$style.gwmodal">
    <div :class="$style.btnBox" @click="backFn">
      <img :class="$style.btnIcon" src="/fanhuibai.png" alt="" />
      <div :class="$style.btnText">返回</div>
    </div>
    <lay-form ref="formRef" :model="formData" :rules="formRules">
      <lay-form-item label="货币选择" label-position="top" prop="currency" required>
        <lay-select v-model="formData.currency" placeholder="请选择">
          <lay-select-option v-for="(item,index) in currencyList" :key="index" :value="item.id" :label="item.name"></lay-select-option>
        </lay-select>
      </lay-form-item>
      <lay-form-item label="填写地址" label-position="top" prop="address" required>
        <lay-input v-model="formData.address" placeholder="填写地址" :allow-clear="true">
        </lay-input>
      </lay-form-item>
      <lay-form-item>
        <lay-button type="primary" @click="submitForm">保存</lay-button>
      </lay-form-item>
    </lay-form>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "GwModal",
  data() {
    return {
      formData: {
        currency: '',
        address: '',
      },
      formRules: {
        currency: [
          { required: true, message: '请选择货币', trigger: 'change' },
        ],
        address: [
          { required: true, message: '请填写地址', trigger: 'blur' },
        ],
      },
      currencyList:[
        {id:'1',name:'ERC20'},
        {id:'2',name:'BTC'},
        {id:'3',name:'ETH'},
        {id:'4',name:'USDT-TRC20'},
      ],
    };
  },
  methods: {
    submitForm() {
      let that = this;
      that.$refs.formRef.validate(valid => {
        if (valid) {
          // let para = {
          //   nickName: that.formData.nickName,
          //   avatar: that.formData.avatar,
          // }
          // let loadIndex = that.$layer.load();
          // that.$axios.post('', para).then((res) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg(res.data.message, { time: 1000 });
          //   if (res.data.code != 200) {
          //     return;
          //   }
          // }).catch((err) => {
          //   that.$layer.close(loadIndex);
          //   that.$layer.msg('保存失败,请重试', { time: 1000 });
          // });
        } else {
          return false;
        }
      });
    },
    backFn(){
      this.$emit('backCard',1);
    },
    getCoinlist(){
      let that=this;
      let loadIndex = that.$layer.load();
      that.$axios.post('/api/Finance/coinlist', {}).then((res) => {
        that.$layer.close(loadIndex);
        if (res.data.code != 200) {
          that.$layer.msg(res.data.message, { time: 1000 });
          return;
        }
      }).catch((err) => {
        that.$layer.close(loadIndex);
        that.$layer.msg('币列表获取失败,请重试', { time: 1000 });
      });
    },
  },
});
</script>
<style module>
.gwmodal {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 20px;
  overflow-y: auto;
}

.btnBox {
  width: 80px;
  height: 32px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #13CE66;
  cursor: pointer;
  margin-bottom: 20px;
}

.btnIcon {
  width: 16px;
  height: 16px;
}

.btnText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  color: #FFFFFF;
  margin-left: 5px;
}
</style>
<style scoped>
.layui-select{
  width: 100%;
}
.layui-btn {
  width: 200px;
  height: 32px;
  line-height: 32px;
}
</style>